<template>
  <div id="app">
    {{ $store.state.count }}, {{ count }}
    <button @click="test">+1</button>
    <button @click="addCount(100)">+100</button>
    <button @click="test2">+1 async</button>
    <button @click="addCountAsync(100)">+100 async</button>

    <hr />

    {{ $store.state.user.token }}
    <!-- 没有命名空间的调用 -->
    <!-- <button @click="$store.commit('updateToken', '678910')">更新token</button>
    <button @click="updateToken('678910')">更新token（辅助函数）</button> -->

    <!-- 有命名空间的调用 -->
    <button @click="updateToken('678910')">更新token</button>

    <hr />

    {{ $store.state.settings.name }}
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['addCount']),
    // 可以用第一个参数来限定模块
    ...mapMutations('user', ['updateToken']), // 这里相当于直接添加了一个updateToken方法，而不是 user/updateToken 方法
    ...mapActions(['addCountAsync']),
    test() {
      this.$store.commit('addCount', 1, 2, 3, 4, 5);
    },
    test2() {
      this.$store.dispatch('addCountAsync', 1);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
